/*!
 * 
 *       安全警告！
 *       此功能专供开发者使用。
 *       请不要在此粘贴执行任何内容，
 *       这可能会导致您的账户受到攻击，给您带来损失 ！
 *       author:D
 *       corporation:D
 *
 */
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  background-image: url(.//assets/img/BG.8a50f.jpg);
  background-repeat: no-repeat;
  background-color: #b20808;
}
#red-envelopes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
  min-width: 300px;
  min-height: 568px;
  background: url(.//assets/img/red_above.7d15e.png) center / contain no-repeat;
  cursor: pointer;
}
#red-envelopes.shaking {
  -webkit-animation: shake 0.2s infinite;
          animation: shake 0.2s infinite;
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
  }
  50% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
  100% {
    -webkit-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
  }
  50% {
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
  }
  100% {
    -webkit-transform: rotateZ(-2deg);
            transform: rotateZ(-2deg);
  }
}
#red-envelopes .txt-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5% 1% 1%;
  width: 43%;
  min-width: 246px;
  max-width: 385px;
  overflow: hidden;
  font-size: 1.4em;
  font-family: STXingKai;
  color: #fbd5ab;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 796px) {
  #red-envelopes .txt-content {
    width: 80%;
    padding: 20% 1% 1%;
    margin-top: -3%;
  }
}
@media screen and (max-width: 690px) {
  #red-envelopes .txt-content {
    width: 85%;
    padding: 31% 4% 1%;
    font-size: 1.2em;
  }
}
#red-envelopes .pic-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
}
#red-envelopes .pic-content .ewm {
  width: 60%;
}
#red-envelopes .btn-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 66%;
  padding: 1% 0 15%;
  opacity: 0;
}
#red-envelopes .btn-content img {
  width: 45%;
  cursor: pointer;
}
#red-envelopes .btn-content img.refuse-content {
  max-width: 189px;
  z-index: 999;
}
@media screen and (max-width: 690px) {
  #red-envelopes .btn-content {
    max-width: 79%;
    padding: 0 0 29%;
  }
}
@media screen and (min-width: 690.01px) and (max-width: 1279.99px) {
  #red-envelopes .btn-content {
    max-width: 55%;
    padding: 1% 0 13%;
  }
}
@media screen and (min-width: 1280px) {
  #red-envelopes .btn-content {
    width: 45%;
    padding: 1% 0 5%;
  }
}

